@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, home);

@function get-unthemable-tokens() {
  @return (
    container-rounded: var(--ngm-primary-container-rounded)
  );
}

@function get-color-tokens() {
  @return (
    background-color: var(--ngm-color-surface),
    card-background-color: var(--ngm-color-surface-container-low),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  flex: 1;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  @include token-utils.create-token-values($prefix, get-token-slots());
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  :host {
    background-color: var(#{token-utils.get-token-variable(background-color)});
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
  }
}